<template>
    <h1>百度地图展示</h1>
    <div id="container"></div>
</template>

<script>
export default {
    mounted() {
        // 1. 创建地图实例
        const map = new BMapGL.Map("container");

        // 2. 设置中心点坐标
        var point = new BMapGL.Point(116.404, 39.915);

        // 3. 地图初始化, 同时设置地图展示级别
        map.centerAndZoom(point, 15);

        // 4. 开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true);

        // 5. 变更地图类型为 地球
        // map.setMapType(BMAP_EARTH_MAP);

        var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
        map.addControl(zoomCtrl);
        var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
        map.addControl(cityCtrl);

        // 添加标注点
        var point = new BMapGL.Point(116.404, 39.915);
        var marker = new BMapGL.Marker(point); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中

        // 添加折线
        var polyline = new BMapGL.Polyline(
            [
                new BMapGL.Point(116.399, 40),
                new BMapGL.Point(116.505, 39.92),
                new BMapGL.Point(116.525, 39.9),
            ],
            { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }
        );
        map.addOverlay(polyline);

        // 自定义地图样式
        // map.setMapStyleV2({
        //     styleId: "df86b12ea6ac43eea23b8a1dcc1ea347",
        // });
    },
};
</script>

<style scoped>
#container {
    height: 800px;
}
</style>
